<!--
 * @Author: 谢陈洁
 * @Date: 2025-06-07 18:33:34
 * @LastEditors: 谢陈洁
 * @LastEditTime: 2025-06-19 12:52:04
 * @Description: file content
-->
<template>
  <el-button
    :type="computedType"
    :size="size"
    :circle="circle"
    :loading="loading"
    :disabled="disabled"
    @click="handleClick"
  >
    <el-icon v-if="icon && !loading" :class="{ 'mr-1': showText }">
      <component :is="icon" />
    </el-icon>
    <span v-if="showText">
      <slot />
    </span>
  </el-button>
</template>

<script lang="ts" setup>
  import { ElButton, ElIcon } from 'element-plus'
  import type { ButtonType } from './types'

  type Props = {
    type?: ButtonType
    icon?: string
    size?: 'default' | 'small' | 'large'
    circle?: boolean
    loading?: boolean
    disabled?: boolean
    showText?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    type: 'primary',
    size: 'default',
    circle: false,
    loading: false,
    disabled: false,
    showText: true
  })

  const emit = defineEmits(['click'])

  // 类型映射表（可扩展）
  const TYPE_MAP: Record<ButtonType, any> = {
    primary: { type: 'primary' },
    success: { type: 'success' },
    warning: { type: 'warning' },
    danger: { type: 'danger' },
    info: { type: 'info' },
    text: { type: 'text' },
    add: { type: 'primary', icon: 'Plus' },
    delete: { type: 'danger', icon: 'Delete' },
    edit: { type: 'warning', icon: 'Edit' },
    query: { type: 'info', icon: 'Search' },
    export: { type: 'success', icon: 'Download' },
    import: { type: 'primary', icon: 'Upload' }
  }

  const computedType = computed(() => {
    const baseType = TYPE_MAP[props.type]?.type || props.type
    return baseType === 'text' ? 'text' : baseType // 保持element的text类型
  })

  const handleClick = (e: MouseEvent) => {
    if (!props.disabled && !props.loading) {
      emit('click', e)
    }
  }
</script>

<style scoped>
  .mr-1 {
    margin-right: 4px;
  }
</style>
